<template>
  <div class='tinymce-container editor-container'>
    <textarea class='tinymce-textarea' :id="tinymceId"></textarea>
    <div class="editor-custom-btn-container">
     <editorImage  color="#20a0ff" class="editor-upload-btn" @successCBK="imageSuccessCBK"></editorImage>
      </div>
  </div>
</template>

<script>
import editorImage from "./components/editorImage";

export default {
  name: "tinymce",
  components: { editorImage },
  props: {
    id: {
      type: String
    },
    value: {
      type: String,
      default: ""
    },
    toolbar: {
      type: Array,
      required: false,
      default() {
        /*
          author shwj 20180327 去掉代理商上传视频的功能 media link
        */ 
        return [
          "removeformat undo redo |  bullist numlist | outdent indent | forecolor | fullscreen code",
          "bold italic blockquote | h2 p | alignleft aligncenter alignright"
        ];
      }
    },
    menubar: {
      default: ""
    },
    height: {
      type: Number,
      required: false,
      default: 360
    }
  },
  data() {
    return {
      hasChange: false,
      hasInit: false,
      tinymceId: this.id || "vue-tinymce-" + +new Date()
    };
  },
  watch: {
    value(val) {
      if (!this.hasChange && this.hasInit) {
        this.$nextTick(() =>
          window.tinymce.get(this.tinymceId).setContent(val)
        );
      }
    }
  },
  mounted() {
    const _this = this;
    window.tinymce.init({
      selector: `#${this.tinymceId}`,
      elementpath: false,
      height: this.height,
      body_class: "panel-body ",
      object_resizing: false,
      toolbar: this.toolbar,
      menubar: this.menubar,
      plugins:
        "advlist,autolink,code,paste,textcolor, colorpicker,fullscreen,link,lists,imagetools", //media
      end_container_on_empty_block: true,
      media_url_resolver: function(data, resolve /*, reject*/) {
        //支持大多数浏览器播放格式 flv,mp4,ogg,webm
        let reg = /\.(flv|mp4|ogg|webm)$/;
        let html = /\.(html)$/;
        if (!data.url) return;
        if (reg.test(data.url)) {
          var embedHtml = `<div style="display" contenteditable="false" data-ephox-embed-iri="${
            data.url
          }">
                  <video style="width: 100%;" controls="controls" data-mce-style="width: 100%;">
                    <source src="${data.url}">
                  </video></div>`;
          resolve({
            html: embedHtml
          });
        } else if (html.test(data.url)) {
          return;
        } else {
          let embedHtml = "";
          if (data.url.includes("<iframe")) {
            embedHtml = data.url;
          } else {
            embedHtml = `<iframe  autoplay = "false" src="${
              data.url
            }"></iframe>`;
          }
          resolve({
            html: embedHtml
          });
        }
      },
      powerpaste_word_import: "clean",
      code_dialog_height: 450,
      code_dialog_width: 1000,
      advlist_bullet_styles: "square",
      advlist_number_styles: "default",
      block_formats: "普通标签=p;小标题=h2;",
      imagetools_cors_hosts: ["wpimg.wallstcn.com", "wallstreetcn.com"],
      imagetools_toolbar: "watermark",
      default_link_target: "_blank",
      language: "zh_CN",
      link_title: false,
      init_instance_callback: editor => {
        if (_this.value) {
          editor.setContent(_this.value);
        }
        _this.hasInit = true;
        editor.on("NodeChange Change KeyUp", () => {
          this.hasChange = true;
          this.$emit("input", editor.getContent({ format: "raw" }));
        });
      },
      // 整合七牛上传
      // images_dataimg_filter(img) {
      //   setTimeout(() => {
      //     const $image = $(img);
      //     $image.removeAttr('width');
      //     $image.removeAttr('height');
      //     if ($image[0].height && $image[0].width) {
      //       $image.attr('data-wscntype', 'image');
      //       $image.attr('data-wscnh', $image[0].height);
      //       $image.attr('data-wscnw', $image[0].width);
      //       $image.addClass('wscnph');
      //     }
      //   }, 0);
      //   return img
      // },
      // images_upload_handler(blobInfo, success, failure, progress) {
      //   progress(0);
      //   const token = _this.$store.getters.token;
      //   getToken(token).then(response => {
      //     const url = response.data.qiniu_url;
      //     const formData = new FormData();
      //     formData.append('token', response.data.qiniu_token);
      //     formData.append('key', response.data.qiniu_key);
      //     formData.append('file', blobInfo.blob(), url);
      //     upload(formData).then(() => {
      //       success(url);
      //       progress(100);
      //     })
      //   }).catch(err => {
      //     failure('出现未知问题，刷新页面，或者联系程序员')
      //     console.log(err);
      //   });
      // },
      setup(editor) {
        editor.addButton("h2", {
          title: "小标题", // tooltip text seen on mouseover
          text: "小标题",
          onclick() {
            editor.execCommand("mceToggleFormat", false, "h2");
          },
          onPostRender() {
            const btn = this;
            editor.on("init", () => {
              editor.formatter.formatChanged("h2", state => {
                btn.active(state);
              });
            });
          }
        });
        editor.addButton("p", {
          title: "正文",
          text: "正文",
          onclick() {
            editor.execCommand("mceToggleFormat", false, "p");
          },
          onPostRender() {
            const btn = this;
            editor.on("init", () => {
              editor.formatter.formatChanged("p", state => {
                btn.active(state);
              });
            });
          }
        });
      }
    });
  },
  methods: {
    setContent(value) {
      window.tinymce.get(this.tinymceId).setContent(value);
    },
    getContent() {
      window.tinymce.get(this.tinymceId).getContent();
    },
    imageSuccessCBK(arr) {
      const _this = this;
      arr.forEach(v => {
        window.tinymce
          .get(_this.tinymceId)
          .insertContent(`<img class="wscnph" src="${v.url}" >`);
      });
    }
  },
  destroyed() {
    window.tinymce.get(this.tinymceId).destroy();
  }
};
</script>

<style scoped>
.tinymce-container {
  position: relative;
}
.tinymce-textarea {
  visibility: hidden;
  z-index: -1;
}
.editor-custom-btn-container {
  position: absolute;
  right: 15px;
  /*z-index: 2005;*/
  top: 18px;
}
.editor-upload-btn {
  display: inline-block;
}
</style>
